<!--
 * @author  hemengxia
 职工钱包账号管理--账户详情
-->
<template>
  <div class="staff-wallet-account-detail">
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :visible.sync="visible"
      :title="title"
      fullscreen
      center
      @close="handleCancel()"
    >
      <section class="content">
        <section class="header-content">
          <span class="total-balance-content">账户总余额: <span class="balance">{{ totalBalance }}</span> </span>
          <el-checkbox v-model="checked" @change="handleCheckChange">只查询余额大于0的账户</el-checkbox>
        </section>
        <section class="main-table">
          <v-table
            :selection="false"
            :list="list"
            tag="accountDetail"
            :list-loading="listLoading"
            :filter-column="filtercolumn"
          />

          <!-- <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> -->
        </section>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryList } from './api'
import elDragDialog from '@/directive/el-drag-dialog'
import VTable from '@/components/Table' // base on element-ui
export default {
  name: 'StaffWalletAccountDetail',
  directives: { elDragDialog },
  components: { VTable },
  props: {

    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: true,
      listLoading: false,
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      checked: true,
      totalBalance: '', // 账户总余额
      title: '账户详情'// 标题

    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleCheckChange(val) {
      this.getList()
    },
    filtercolumn(scope, item) {
      if (item === 'subAcntSt') {
        return (scope.row[item] === 0 || scope.row[item] === '0') ? '可用' : '不可用'
      } else if (item === 'subAcntStartTm' || item === 'subAcntEndTm') {
        if (scope.row[item]) {
          return scope.row[item].replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$1-$2-$3 $4:$5:$6')
        } else {
          return ''
        }
      } else {
        return scope.row[item]
      }
    },
    rowClass({ row, rowIndex }) {
      return {
        padding: '5px 0',
        height: '20px',
        background: 'rgba(247,247,248,1)'
      }
    },
    handleCancel() {
      this.$emit('cancel')
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        userId: this.id,
        type: this.checked ? 1 : 2
      }
      return new Promise((resolve, reject) => {
        queryList(query).then(response => {
          this.list = response.data.data
          this.totalBalance = response.data.sumMoney || 0
          if (response.data.time) {
            this.title = '账户详情(' + response.data.time + ')'
          }

          this.listLoading = false
        }).catch(error => {
          this.listLoading = false
          reject(error)
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

.staff-wallet-account-detail {
  position: relative;

  .header-content {
    height: 50px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .total-balance-content {
      font-weight: bold;
      .balance{
        font-size: 18px;
        @include font-color($mainColor);
      }
    }
  }

  /*  .staff-wallet-account-detail-inner {
      max-height: calc(100vh - 130px);
      min-height: calc(100vh - 130px);
      position: relative;

      &::after {
        content: '';
        height: 1px;
        background-color: #e2e3e8;
        position: absolute;
        bottom: 0;
        left: -20px;
        right: -20px;
      }
    }*/
}
</style>
